{% extends "base.html" %}
{% load quiz_tags compare %}

{% block title %}{{ session.quiz }}{% endblock %}

{% block extrahead %}
{{ block.super }}
<style type="text/css">
    .answer-set {border-top: 1px solid; margin-bottom: 25px; }
    .answer {font-size: 14pt; width: 19%; float: left;}
    .answer input {margin-right: 10px; }
    .hiragana {
        margin: auto;
        font-size: 70pt;
        border: 3px solid black;
        margin-bottom: 25px;
        text-align: center;
        white-space: nowrap;
    }
    .question {
        text-align: center;
    }
    .answer.current-answer { font-weight: bold; }
    .answer.attempted { text-decoration: line-through; }
    .message { font-weight: bold; text-align: center; font-size: 16pt; }
    #sidebar {
        padding-left: 5px;
        border-left: 1px solid;
        margin-left: 5px;
        width: 300px;
        float: right;
    }
</style>
{% endblock %}

{% block content %}
{% if session.practice %}
<div id="sidebar">
    <div class="user-notes">

        {% if response.answered_on or response.attempt|gt:1 %}
            {% with question|user_notes as notes %}{% if notes %}
            <h3>User Contributed Hints</h3>
            <ul>
                {% for note in notes %}
                <li>{{ note.content }} ~ {{ note.user.username }}
                {{ note.created_on|date:"m/d/y" }}</li>
                {% endfor %}
            </ul>
            {% endif %}{% endwith %}
        {% endif %}
        {% if response.score|gt:0 and user.is_authenticated %}
        <h3 onclick="$('#user-note-form').toggle('slow')">Contribute Hint</h3>
        <div id="user-note-form">
            {% user_notes_form question %}
        </div>
        {% endif %}
    </div>
</div>
{% endif %}
<div class="question">
    <h2>{{ question.title|default:question.module.name }}</h2>
    <h3>Question #{{ idx|add:1 }}:{% if response.answered_on %} Answered {% endif %}</h3>
    {{ question.content|safe }}

    <form action="." method="post">
        <input name="question" value="{{ response.id }}" type="hidden" />
        <div class="answer-set">
            {% for useranswer in response.userpossibleanswer_set.all %}
            {% with useranswer.possibleanswer as answer %}
            <div class="answer{% ifequal answer.content response.answer %} current-answer{% endifequal %}{% if answer.content|in:previous_answers %} attempted{% endif %}">
                <input type="radio" name="answer" value="{{ useranswer.id }}" {% ifequal answer.content response.answer %}checked="checked"{% endifequal %} />
                <a href="javascript:void()" onclick="$(this).prev().attr('checked', 'checked');$(this).parents('form').get(0).submit()">{{ answer.content }}</a>
            </div>
            {% endwith %}
            {% endfor %}
            <br clear="both" />
        </div>
        {% if message %}<div class="message">{{ message }}</div>{% endif %}
        {% if previous %}
        <a href="{% url quiz-question previous.id %}">&lt;&lt; Previous Question</a>
        {% endif %}
        <input type="submit" value="Answer" />
        {% if next %}
        <a href="{% url quiz-question next.id %}">Next Question &gt;&gt;</a>
        {% endif %}<br />
        {% if next_unanswered %}
        <a href="{% url quiz-question next_unanswered.id %}">Next Unanswered Question &gt;&gt;</a>
        {% endif %}
    </form>
    {{ question.id }}
</div>
{% endblock %}